<template>
  <div
    ref="zh_zz_zx"
    :class="className"
    :style="{ height: height, width: width }"
  />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    chartData: {
      type: Object,
      required: true
    },
    className: {
      type: String,
      default: 'zh_zz_zx'
    },
    id: {
      type: String,
      default: 'zh_zz_zx'
    },
    width: {
      type: String,
      default: '1500px'
    },
    height: {
      type: String,
      default: '400px'
    }
  },
  data() {
    return {
      chart: null,
      op: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          formatter: function(params) {
            var res = '<center>' + params[0].axisValue + '</center>'
            for (var i = 0; i < params.length; i++) {
              if (params[i].seriesName === '总工时') {
                res += params[i].marker + params[i].seriesName + ' : ' + params[i].value + 'h' + '<br>'
              } else {
                res += params[i].marker + params[i].seriesName + ' : ' + params[i].value + '<br>'
              }
            }
            return res
          }
        },
        legend: {
          // data: ['蒸发量', '降水量', '平均温度']//项目，工时
          data: ['参与项目数', '总工时']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            inverse: true, // 倒叙
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],//项目名称
            data: this.chartData.xAxis_data,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '参与项目数',
            min: 0,
            max: this.chartData.yAxis_num_max, // 获取接口的最大值
            interval: this.chartData.yAxis_num_interval, // 步长的计算，最大值/份数5
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '总工时',
            min: 0,
            max: this.chartData.yAxis_time_max, // 获取接口的最大值
            interval: this.chartData.yAxis_time_interval, // 步长的计算：最大值/份数5
            axisLabel: {
              formatter: '{value} h'
            }
          }

        ],
        series: [
          {
            name: '参与项目数',
            type: 'bar',
            // data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            data: this.chartData.series_project_num,
            itemStyle: { normal: { label: { show: true, position: 'top' }}}
          },
          {
            name: '总工时',
            type: 'line',
            yAxisIndex: 1,
            // data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            data: this.chartData.series_project_time,
            itemStyle: { normal: { label: { show: true }}}
          }
        ]
      }
    }
  },
  watch: {
    chartData(newV, oldV) {
      this.initChart()
    }
  },
  // created(){
  //     // this.initChart()

  // },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      require('./walden.js')
      /* eslint-disable */
      this.chart = echarts.init(this.$refs.zh_zz_zx, "walden");
      /* eslint-disable */
      this.op.xAxis[0].data = this.chartData.xAxis_data;
      this.op.yAxis[0].max = this.chartData.yAxis_time_max;
      this.op.yAxis[0].interval = this.chartData.yAxis_time_interval;
      this.op.yAxis[1].max = this.chartData.yAxis_num_max;
      this.op.yAxis[1].interval = this.chartData.yAxis_num_interval;
      this.op.series[0].data = this.chartData.series_project_num;
      this.op.series[1].data = this.chartData.series_project_time;
      this.chart.setOption(this.op);
    },
  },
};
</script>
